<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/font-awesome.css" />
    <script src="js/vue.js"></script>
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
<!--    //<script src="js/jquery.cookie.min.js"></script>-->
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #EEEEEE;
    }
    .navbar-text a  {
        color: #ffffff;
    }
    .login-text {
        margin-right: 50px;
    }
    .logo {
        color: #E94F4C;
        font-size: 35px;
        display: inline-block;
    }
    .search-box {
        height: 48px;
    }
    .input-group-addon {
        background-color:#E94F4C;
        border: none;
        color: #ffffff;
    }
    .control-icon {
        position: absolute;
        top: 50%;
    }
    .mgt38 {
        margin-top: 30px;
    }
    .thumbnail a img {
        height: 200px;
        width: 200px;
    }
    .thumbnail .description {
        height: 40px;
        overflow: hidden;
    }
    a:hover {
        text-decoration: none;
    }
    h3, p {
        text-align: center;
    }
    table tr {
        background-color: #ffffff;
    }
</style>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-static-top">
    <div class="container-fluid" id="top_show">
        <div class="navbar-header">
            <a href="/goToIndex" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i> 寻欢易购</a>
        </div>
        <p class="navbar-text navbar-right login-text" v-if="showLogin">
            <a id="loginText" href="login.html">登录</a>
        </p>
        <p class="navbar-text navbar-right login-text" v-if="showName">
            <a id="outLogin" href="/" onclick="outLogin()">登出</a>
        </p>
        <p class="navbar-text navbar-right" v-if="showLogin">
            <a href="register.html">注册</a>
        </p>
        <p class="navbar-text navbar-right">
            <a onclick="gotoOrder()" href="#">我的订单</a>
        </p>
    </div>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-8 col-xs-push-2">
            <table id="app" class="table">
                <thead>
                <tr>
                    <td>商品</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody id="cartListInfo">
                <tr v-for="c in cartList">
                    <td style="max-width: 200px;">
                        <div class="media">
                            <div class="media-left">
                                <a href="javascript: void(0);">
                                    <img class="media-object" height="80px" width="62px" :src="'http://10.3.140.185/'+c.smallPic">
                                </a>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">{{c.title}}}</h4>
                            </div>
                        </div>
                    </td>
                    <td>{{c.price}}</td>
                    <td>

                        <div class="input-group" style="width: 150px;">


                                    <span class="input-group-addon" v-if="c.num==1"
                                          style="background-color: #e2e2e2;"
                                          onclick="">-</span>
                            <span class="input-group-addon" v-else
                                  style="cursor: pointer;"
                                  onclick="cutGoodNum(this)">-</span>

                            <input class="form-control" name="myInput" :value="c.num">

                            <span class="input-group-addon"
                                  style="cursor: pointer;"
                                  onclick="addGoodNum(this)">+</span>
                        </div>

                    </td>
                    <td>{{c.price*c.num}}</td>
                    <td hidden="hidden">
                        <p>{{c.goodsId}}</p>
                    </td>
                    <td>
                        <button :id="c.goodsId" onclick="deleteSpecifyGood(this)" class="btn btn-default">删除</button>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr v-if="goods.length != 0">
                    <td colspan="5">
                        已选购 <span id="totalCount" style="color: red;">2</span> 件商品,
                        总价 <span  style="color: red;" id="totalPrice">20000</span>
                        <button onclick="gotoSettleCount()" class="btn btn-danger btn-lg">去结算</button>
                    </td>
                </tr>
                <!-- 如果没有商品，就是显示。
                <tr>
                    <td colspan="5">暂无商品.<a href="index.html">去购物</a></td>
                </tr>
                -->
                </tfoot>
            </table>
        </div>
    </div>
</div>
</body>
<script>


    var uName = "";
    var uId = 0;
    /**
     * 页面首次加载方法
     */
    $(function () {

        /**
         * 获取后端session数据
         * uName：用户名
         * uId：用户ID
         */
        $.ajax({
            url: '/getLoginInfo',
            type: 'GET',
            dataType: 'JSON',
            success: function (data) {
                console.log(data)
                uName = data['uName'];
                uId = data['uId'];

                //显示用户名或登录注册
                showName()
                //设置显示的名字
                $('#loginName').text(uName)
                //获取购物车所有详情条目
                getCartItem()

                getTotal()
            }
        })
    })

    /**
     *动态显示“登录注册” 和 “用户名” 方法
     */
    function showName(){
        if (uName==""||uName==null||uId==0){
            var vm1 = new Vue({
                el: '#top_show',
                data: {
                    showName:false,
                    showLogin:true
                }
            })
        }else {
            var vm1 = new Vue({
                el: '#top_show',
                data: {
                    showName:true,
                    showLogin:false
                }
            })
        }
    }


    /**
     * 根据登录状态，获取所有购物车详情条目
     */
    function getCartItem() {
        var vm = new Vue({
            el: '#cartListInfo',
            data: {
                cartList: []
            }
        })
        $.ajax({
            url: '/getCartItem',
            type: 'GET',
            dataType: 'JSON',
            success: function (data) {
                console.log(data)

                //渲染列表
                for (var i=0;i<data.length;i++) {
                    var cartItem = data[i];
                    var goodsId = cartItem.goodsId;

                    var id = cartItem.id;
                    var uId1 = cartItem.uId;
                    var num = cartItem.num;
                    var createTime = cartItem.createTime;
                    var updateTime = cartItem.updateTime;

                    var itemId = cartItem.itemId;
                    var title = cartItem.title;
                    var smallPic = cartItem.smallPic;
                    var price = cartItem.price;
                    var status = cartItem.status;
                    var stockNum = cartItem.stockNum;
                    var description = cartItem.description;

                    vm.cartList.push({
                        goodsId: goodsId,
                        id: id,
                        num: num,
                        createTime: createTime,
                        updateTime: updateTime,
                        itemId: itemId,
                        title: title,
                        smallPic: smallPic,
                        price: price,
                        status: status,
                        stockNum: stockNum,
                        description: description
                    })
                }
                console.log(vm.cartList)
            }
        })
    }


    /**
     * 商品 +号 添加数量方法
     * @param s
     * style="cursor: pointer;"  为可用
     * style="background-color: #e2e2e2;"  不可用
     */
    function addGoodNum(s) {
        //获取当前添加的商品id
        var goodsId = $(s).parent().parent().siblings()[3].firstChild.innerHTML;
        console.log("goodsId:"+goodsId);

        $.ajax({
            url: '/addGoodNum',
            type: 'GET',
            data: {goodsId:goodsId},
            dataType: 'JSON',
            success: function (data) {

                if (data['stockState'] == "yes"){

                    getTotal()

                    //还有库存

                    //修改：被选中的商品 的价格小计
                    $($(s).parent().parent().siblings()[2]).text(data['subtotal'])

                    //修改：被选中的商品 的数量
                    $($(s).siblings()[1]).val(data['num'])

                    $($(s).siblings()[1]).val(data['num'])
                    var s1 = parseInt($($(s).siblings()[1]).val());
                    if (s1>1){

                        $($(s).siblings()[0]).attr("style","cursor: pointer;")
                        $($(s).siblings()[0]).attr("onclick","cutGoodNum(this)")
                    }

                } else {
                    //没有库存
                    alert("库存不足了....")
                    $(s).attr("style","background-color: #e2e2e2;")
                    $(s).attr("onclick","#")
                }
            }
        })

    }



    /**
     * 商品 -号 减少数量方法
     * @param s
     * style="cursor: pointer;"  为可用
     * style="background-color: #e2e2e2;"  不可用
     */
    function cutGoodNum(s) {
        //获取当前添加的商品id
        var goodsId = $(s).parent().parent().siblings()[3].firstChild.innerHTML;
        console.log("goodsId:"+goodsId);
        var inum = parseInt($($(s).siblings()[0]).val());

        $.ajax({
            url: '/cutGoodNum',
            type: 'GET',
            data: {goodsId:goodsId},
            dataType: 'JSON',
            success: function (data) {

                getTotal()

                if (inum>1){
                    //还有库存
                    //修改：被选中的商品 的价格小计
                    $($(s).parent().parent().siblings()[2]).text(data['subtotal'])

                    //修改：被选中的商品 的数量
                    $($(s).siblings()[0]).val(data['num'])
                    var s1 = parseInt($($(s).siblings()[0]).val());

                    if (s1==1){
                        $(s).attr("style","background-color: #e2e2e2;")
                        $(s).attr("onclick","#")
                    }
                } else {
                    //没有库存
                    alert("不能再减少了...")
                    $(s).attr("style","background-color: #e2e2e2;")
                    $(s).attr("onclick","#")
                }

            }
        })

    }


    /**
     * 删除一条商品记录
     * @param s
     */
    function deleteSpecifyGood(s) {
        var goodsId = $(s).parent().siblings()[4].firstChild.innerHTML;
        console.log(goodsId);

        $.ajax({
            url: '/deletCartItem',
            type: 'GET',
            data: {goodsId:goodsId},
            dataType: 'JSON',
            success: function (data) {
                getTotal()

                $(s).parent().parent().remove();
            }
        })

    }


    /**
     * 查询总价和总数量的方法
     */
    function getTotal() {


        $.ajax({
            url: '/getTotalData',
            type: 'GET',
            dataType: 'JSON',
            success: function (data) {


                //总数量
                $('#totalCount').html(function () {
                    $('#totalCount').text(data['totalCount'])
                })
                $('#totalPrice').html(function () {
                    $('#totalPrice').text(data['totalPrice'])
                })
            }
        })
    }

    function gotoOrder() {
        if (uName==null||uName==""||uId==null||uId==0){
            alert("还未登录，请登录后查看")
            window.location.href="login.html"
        } else {
            window.location.href="showOrder"
        }
    }



    function gotoSettleCount() {
        if (uName==null||uName==""||uId==null||uId==0){
            alert("还未登录，请登录后结算")
            window.location.href="login.html"
        } else {
            window.location.href="settlement.html"
        }
    }

    function outLogin() {
        $.ajax({
            url: '/front/outLogin',
            type: 'GET',
            dataType: 'TEXT',
            success: function (data) {

            }
        })
    }


</script>
</html>